<template>
  <view class="schedule">
    <view v-if="leader == '1'" class="schedule-top">
      <g-tabs-top
        :list="typeList"
        v-model:current="queryParams.type"
        square
        boxShadow
        :scroll="false"
        @change="resetQuery"
      />
      <uv-icon
        v-if="queryParams.type == 1"
        :name="iconFilter"
        class="schedule-icon"
        @click="popupShow"
      />
    </view>
    <g-month-calendar
      :more="false"
      bg-color="linear-gradient(180deg, #ABD49D 0%, #4EA770 100%)"
      color="#fff"
      align="center"
      checked-class="active-checked"
      :dot-list="dotList"
      show-back
      :dot-style="{
        background: '#fff',
      }"
      @selected-change="changeDate"
      @days-change="daysChange"
    >
      <view class="schedule-content">
        <view
          class="schedule-item"
          v-for="(item, index) in dataList"
          :key="index"
          :style="{
            '--statusColor': getColor(item.status),
          }"
        >
          <view class="schedule-item-left">
            <view class="date">
              {{ timeFormat(Number(new Date(item.beginTime))) }}-{{
                timeFormat(Number(new Date(item.endTime)))
              }}
            </view>
            <view class="title">{{ item.projectName }}</view>
          </view>
          <view class="schedule-item-right">
            <uv-icon
              bold
              :name="getStatusIcon(item.status)"
              :label="getStatusLabel(item.status)"
              label-color="#757575"
            />
          </view>
        </view>
        <uv-load-more v-if="dataList.length > 0" :status="status" line />
        <uv-empty v-else margin-top="20vh" :icon="empty" text="今天还没有安排日程哦" />
      </view>
    </g-month-calendar>
    <uv-popup ref="popupRef" mode="right" z-index="980" closeable>
      <view class="popup-content">
        <uv-status-bar />
        <uv-text
          text="数据筛选"
          color="#757575"
          size="28rpx"
          line-height="100rpx"
          margin="auto 30rpx"
        />
        <uv-text
          text="日程状态"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view class="row">
          <view
            class="row-btn"
            v-for="(i, k) in statusList"
            :key="k"
            :class="{ active: i.value == queryParams.status }"
            @click="queryParams.status = i.value"
          >
            {{ i.label }}
          </view>
        </view>
        <uv-text
          text="关键词查询"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view style="margin: 0 30rpx">
          <uv-input
            v-model="queryParams.projectName"
            prefixIcon="search"
            placeholder="输入日程关键词"
          />
        </view>
        <uv-text
          text="参与人员"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view class="date-box" @click="showUser">
          {{ getUserName(queryParams.userId) }}
        </view>
        <view class="row-bottom">
          <uv-button text="重置" @click="resetQuery" />
          <uv-button
            text="确定"
            color="#fff"
            :custom-style="{
              background: '#4EA770',
            }"
            @click="handleQuery"
          />
        </view>
      </view>
    </uv-popup>
    <uv-picker
      ref="userRef"
      round="20rpx"
      :columns="userList"
      key-name="userNickName"
      confirm-color="#4EA770"
      @confirm="confirmUser"
    />
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { timeFormat } from "@/common/mothed.js";
import { getDateMarks, getDateSchedules, getSubordinates } from "@/request/home.js";
import empty from "@/static/empty.png";
import iconFilter from "@/static/icon_filter.png";
import iconClock from "@/static/home/icon_clock.png";
import iconAppointment from "@/static/home/icon_appointment.png";
import iconSuccess from "@/static/home/icon_success.png";
import iconProgress from "@/static/home/icon_progress.png";
import iconWarn from "@/static/home/icon_warn.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
  // 是否为负责人
  leader: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["onRefresh", "onReach"]);

const queryParams = ref({
  time: timeFormat(Number(new Date())), // 当前日期
  projectName: "", // 关键词
  type: 0, // 类型
  status: "", // 状态
  pageNum: 1, // 当前页码
  pageSize: 20, // 每页条数
  userId: "", // 下属人员ID
});
const total = ref(0); // 总条数
const beginTime = ref(); // 本周开始时间
const endTime = ref(); // 本周结束时间
const popupRef = ref(); // 筛选弹窗ref
const userRef = ref(); // 人员弹窗ref
const userList = ref([[]]); // 下级人员列表
const typeList = ref([
  { label: "我的日程", value: "0" },
  { label: "下属日程", value: "1" },
]);
const statusList = ref([
  // 日程状态
  { label: "全部", value: "" },
  { label: "未开始", value: 1 },
  { label: "进行中", value: 3 },
  { label: "已完成", value: 4 },
  { label: "已超时", value: 5 },
]);
const dataList = ref([]); // 日程列表
const dotList = ref([]); // 标记列表
const status = ref("loadmore"); // 加载状态

onMounted(() => {
  getList();
});

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        queryParams.value.pageNum = 1;
        getList();
      }, 0);
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  { immediate: true, deep: true }
);

// 获取标记列表
const getMarks = () => {
  getDateMarks({
    beginTime: beginTime.value,
    endTime: endTime.value,
  }).then((res) => {
    dotList.value = res.data;
  });
};

// 获取数据列表
const getList = () => {
  status.value = "loading";
  getDateSchedules(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("onReach", false);
    });
};

// 打开筛选弹窗
const popupShow = () => {
  popupRef.value.open();
};

// 获取人员名称
const getUserName = (id) => {
  let row = userList.value[0]?.find((item) => item.userId == id);
  return row ? row.userNickName : "请选择人员";
};

// 显示选择人员弹窗
const showUser = () => {
  getuserList();
  userRef.value.open();
};

// 下属人员列表
const getuserList = () => {
  getSubordinates().then((res) => {
    if (res.code == 200) {
      userList.value[0] = res.data;
    }
  });
};

// 确认人员
const confirmUser = (e) => {
  queryParams.value.userId = e.value[0].userId;
};

// 重置查询
const resetQuery = () => {
  queryParams.value.status = "";
  queryParams.value.projectName = "";
  queryParams.value.pageNum = 1;
  popupRef.value.close();
  getList();
};

// 确认查询
const handleQuery = () => {
  popupRef.value.close();
  queryParams.value.pageNum = 1;
  getList();
};

// 日期改变
const changeDate = (date) => {
  queryParams.value.time = date;
  queryParams.value.pageNum = 1;
  getList();
};

// 日期范围
const daysChange = (date) => {
  beginTime.value = timeFormat(Number(date.start));
  endTime.value = timeFormat(Number(date.end));
  getMarks();
};

// 状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 1:
      return iconClock;
    case 2:
      return iconAppointment;
    case 3:
      return iconProgress;
    case 4:
    case 6:
      return iconSuccess;
    case 5:
      return iconWarn;
    default:
      return "";
  }
};

// 状态颜色
const getColor = (status) => {
  switch (status) {
    case 1:
      return "#f2ce90";
    case 2:
      return "#85C889";
    case 3:
      return "#87BCF5";
    case 4:
    case 6:
      return "#85C889";
    case 5:
      return "#F2AFA5";
    default:
      return "";
  }
};

// 状态中文显示
const getStatusLabel = (status) => {
  switch (status) {
    case 1:
      return "未开始";
    case 2:
      return "已预约";
    case 3:
      return "进行中";
    case 4:
    case 6:
      return "已完成";
    case 5:
      return "已超时";
    default:
      return "";
  }
};
</script>
<style lang="scss" scoped>
.schedule {
  padding: 30rpx;
  box-sizing: border-box;
  .schedule-top {
    margin: auto;
    width: 650rpx;
    position: relative;
    .schedule-icon {
      position: absolute;
      right: 30rpx;
      top: 26rpx;
      z-index: 99;
    }
  }
  .schedule-content {
    padding: 20rpx;
    min-height: 60vh;
  }
}
:deep(.is-today) {
  color: #fff !important;
}
:deep(.active-checked) {
  background-color: #fff !important;
  color: #4ea770 !important;
}
.schedule-item {
  --statusColor: #f2ce90;
  width: auto;
  height: 120rpx;
  background: #f6f6f6;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  &-left {
    width: calc(100% - 240rpx);
    height: 100%;
    padding-left: 60rpx;
    position: relative;
    border-right: 2rpx solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 20rpx;
      height: 120rpx;
      background-color: var(--statusColor);
    }
    .date {
      font-size: 28rpx;
      color: #757575;
    }
    .title {
      font-size: 28rpx;
      color: #212121;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-right {
    width: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
.popup-content {
  width: 600rpx;
  height: 100%;
  position: relative;
  .row {
    display: grid;
    gap: 20rpx;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 30rpx;
    margin-bottom: 40rpx;
    &-btn {
      width: 160rpx;
      height: 66rpx;
      border-radius: 8rpx;
      background-color: #fff;
      border: 2rpx solid #dedede;
      font-size: 28rpx;
      color: #757575;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      color: #fff;
      background-color: #4ea770;
      border: 2rpx solid #4ea770;
    }
  }
  .date-box {
    height: 66rpx;
    padding: 12rpx;
    box-sizing: border-box;
    margin: auto 30rpx;
    background: #ffffff;
    border-radius: 8rpx;
    border: 2rpx solid #dedede;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #bdbdbd;
  }
  .row-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    view {
      flex: 1;
    }
  }
}
:deep(.uv-popup__content__close--top-right) {
  top: calc(15px + var(--status-bar-height)) !important;
}
</style>
